<template>
  <div class="home" ref="homeDiv">
    <el-container>
      <el-main ref="main1">
        <ProgressOverview :chartWidth="chartWidthRow1" :chartHeight="chartHeightRow" />
      </el-main>
      <el-main>
        <ScheduleOverview :chartWidth="chartWidthRow1" :chartHeight="chartHeightRow" />
      </el-main>
    </el-container>
    <el-container>
      <el-main>
        <TopicStatistics :chartWidth="chartWidthRow2" :chartHeight="chartHeightRow" />
      </el-main>
      <el-main>
        <AssetStastics :chartWidth="chartWidthRow2" :chartHeight="chartHeightRow" />
      </el-main>
      <el-main><DistributionMap  :chartWidth="chartWidthRow2" :chartHeight="chartHeightRow"/></el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import ProgressOverview from '../../components/ProjectManager/Common/ProgressOverview.vue';
import ScheduleOverview from '../../components/MonthlyPlanManager/Common/ScheduleOverview.vue';
import TopicStatistics from '../../components/ForumManager/Common/TopicStatistics.vue';
import AssetStastics from '../../components/AssetManager/Common/AssetStastics.vue';
import DistributionMap from '../../components/Common/Echarts/Map/DistributionMap.vue';

/* 引用 home div 元素 */
const homeDiv = ref<HTMLElement | null>(null);
let main1 = ref<HTMLElement | null>(null);
let chartHeightRow = ref((window.innerHeight - 60 - 20 - 20 - 40) / 2); // 默认高度  视口高度-header高度-MainForm的上下pading-上下两行的4个margin值-el-main继承的main中的上下两个pading值
let chartWidthRow1 = ref((window.innerWidth - 240 - 40 - 20 - 40) / 2); // 默认宽度 视口宽度-左侧菜单栏的宽度-MainForm的左右pading - el-main的左右两个padding -
let chartWidthRow2 = ref((window.innerWidth - 240 - 40 - 40 - 40) / 3);

onMounted(() => {
  if (homeDiv.value) {
    nextTick(() => {
      // console.log('nextTick  homeDiv.value', homeDiv.value.clientHeight)
    })
    setTimeout(() => {
      // console.log('setTimeout  homeDiv.value ', homeDiv.value.clientHeight)
    }, 1000);
  }
})
</script>
